window.addEvent ('domready', function () {
	
	// Variables de Drags y Drops
	var $drags = $$('#drags div');
	var $drops = $$('#drops div ');
	
	// Modificamos el desplazamiento de del fondo de los drops (background-position).
	$drops.each (function ($drop, iI) {
		var $bgPos = iI*(-180).toString() + 'px -180px';
		$drop.setStyle ('background-position', $bgPos);
	});
	
	/*
	for (var i = 0 ; i < $drags.length; i++){
		var myDrag = new Drag.Move($drags[i], {
		    droppables: '.drop'	 
		});
	}
	*/
	
	
	// Creamos objeto tipo Drag and Drop Basico
	miDxD = new DxD ($drags, $drops, {
		container: $('content'),
		dragDelete: true,
		sendToBack: 'ini',
		cssClass: 'miDxD',
		adjDrags: [
			{ x: 10, y: 400 },
			{ x: 210, y: 400 },
			{ x: 410, y: 400 },
			{ x: 610, y: 400 },
		],
		adjDrops: [
			{ x: 10, y: 100 },
			{ x: 210, y: 100 },
			{ x: 410, y: 100 },
			{ x: 610, y: 100 },
		]
	});
	
	miDxD.htmlDrags.each (function ($htmlDrag, $iHD) {
		$htmlDrag.addEvents ({
			'mousedown': function () {
				console.debug (miDxD.elDrags[$iHD]);
			},
		});
	});
	
	miDxD.htmlDrops.each (function ($htmlDrop, $iHD) {
		$htmlDrop.addEvents ({
			'mousedown': function () {
				console.debug (miDxD.elDrops[$iHD]);
			},
		});
		
		$htmlDrop.set ('html',
			'<p>pos.left: <b>'+miDxD.elDrops[$iHD].pos.left+'</b><p>' + 
			'<p>pos.top: <b>'+miDxD.elDrops[$iHD].pos.top+'</b><p>' + '<br />' + 

			'<p>pos.right: <b>'+miDxD.elDrops[$iHD].pos.right+'</b><p>' + 
			'<p>pos.bottom: <b>'+miDxD.elDrops[$iHD].pos.top+'</b><p>' + '<br />'
		);
	});


	miDxD.addEvent ('beforeStart', function ($objDrag) {
		$('dragInfo').set ('html',
			'<p>value.now.x: <b>'+$objDrag.value.now.x+'</b><p>' + 
			'<p>value.now.y <b>'+$objDrag.value.now.y+'</b><p>' + '<br />' + 

			'<p>mouse.now.x: <b>'+$objDrag.mouse.now.x+'</b><p>' + 
			'<p>mouse.now.y <b>'+$objDrag.mouse.now.y+'</b><p>' + '<br />' + 

			'<p>mouse.pos.x: <b>'+$objDrag.mouse.pos.x+'</b><p>' + 
			'<p>mouse.pos.y <b>'+$objDrag.mouse.pos.y+'</b><p>' + '<br />' /*+ 

			'<p>mouse.start.x: <b>'+$objDrag.mouse.start.x+'</b><p>' + 
			'<p>mouse.start.y <b>'+$objDrag.mouse.start.y+'</b><p>'*/
		);
	});
		
	miDxD.addEvent ('drag', function ($objDrag) {
		/*
		miDxD.htmlDrags[$objDrag.ind].set ('html',
			'<p>coords.left: <b>'+$objDrag.coords.left+'</b><p>' + 
			'<p>coords.top: <b>'+$objDrag.coords.top+'</b><p>' + '<br />' + 

			'<p>coords.width: <b>'+$objDrag.coords.width+'</b><p>' + 
			'<p>coords.height: <b>'+$objDrag.coords.height+'</b><p>' + '<br />' + 

			'<p>coords.right: <b>'+$objDrag.coords.right+'</b><p>' + 
			'<p>coords.bottom: <b>'+$objDrag.coords.bottom+'</b><p>' + '<br />'
		);
		*/
		
		miDxD.htmlDrags[$objDrag.ind].set ('html',
			'<p>value.now.x: <b>'+$objDrag.value.now.x+'</b><p>' + 
			'<p>value.now.y <b>'+$objDrag.value.now.y+'</b><p>' + '<br />' + 

			'<p>mouse.now.x: <b>'+$objDrag.mouse.now.x+'</b><p>' + 
			'<p>mouse.now.y <b>'+$objDrag.mouse.now.y+'</b><p>' + '<br />' + 

			'<p>mouse.pos.x: <b>'+$objDrag.mouse.pos.x+'</b><p>' + 
			'<p>mouse.pos.y <b>'+$objDrag.mouse.pos.y+'</b><p>' + '<br />' + 

			'<p>mouse.start.x: <b>'+$objDrag.mouse.start.x+'</b><p>' + 
			'<p>mouse.start.y <b>'+$objDrag.mouse.start.y+'</b><p>'
		);
		

/*		miDxD.htmlDrags[$objDrag.ind].set ('html',
			'<p>value.now.x: <b>'+$objDrag.value.now.x+'</b><p>' + 
			'<p>value.now.y <b>'+$objDrag.value.now.y+'</b><p>' + '<br />' + 

			'<p>mouse.now.x: <b>'+$objDrag.mouse.now.x+'</b><p>' + 
			'<p>mouse.now.y <b>'+$objDrag.mouse.now.y+'</b><p>' + '<br />' + 

			'<p>mouse.pos.x: <b>'+$objDrag.mouse.pos.x+'</b><p>' + 
			'<p>mouse.pos.y <b>'+$objDrag.mouse.pos.y+'</b><p>' + '<br />' + 

			'<p>mouse.start.x: <b>'+$objDrag.mouse.start.x+'</b><p>' + 
			'<p>mouse.start.y <b>'+$objDrag.mouse.start.y+'</b><p>'

		)
*/
	});
/*
	// Definimos funcion de drop correcto (trueDrop)
	miDxD.fncTrueDrop = function ($drag, $drop) {
		if ($drag.ind == $drop.ind) return true;
		else return false;
	};


	// Evento trueDrop
	miDxD.addEvent ('drop', function ($drag, $drop) {
//		console.debug ('drop: ', $drag, $drop);
	});
		
	// Evento trueDrop
	miDxD.addEvent ('trueDrop', function ($drag, $drop) {
		$drop.setStyle ('background-position', $drag.ind*(-180).toString() + 'px top');
	});

	// Disparamos fin de actividad
	miDxD.addEvent ('dropsComplete', function ($drag, $drop) {
		alert ('riiingggg !');
	});
	
	*/
});